什么是 CSS

CSS 称为层叠样式表，也可以称为 CSS 样式表或样式表，其扩展名位 .CSS 。CSS 是用于增强或控制网页样式，并也许将样式信息与网页内容分割开的一种标记性语言

HTML 使用 CSS 样式

CSS 的样式一共分为四种，并且优先级为行内样式 > 内嵌样式 > 链接样式 > 导入样式

行内样式

直接把 CSS 代码添加到 HTML 标记中，即作为 HTML 标记的属性

使用方法就是在 HTML 中使用 style 属性。

1	<p style = 'color:red;font-size:px'>段落样式</p>

内嵌样式

将 CSS 样式代码添加到 <head></head>，并且用 <style></style>进行声明。

<head>
	<meta charset="utf-8" />
	<style type="text/css">
		h1{
				color: red;
		}
	</style>
</head>
<body>
	<h1>大会总结</h1>
</body>

这里的 type 是 style 属性，text/css 是 type 是他的值。它们是告诉浏览器这里面的文本内容（text）要用当前的层叠样式表（css）来解析，不能当作其他来解析。

链接样式

将页面内容和样式风格代码分离成两个或多个文件

使用方法就是在外部定义 CSS 样式表并且形成 .css 为扩展名的文件，然后 <link> 链接标记链接到页面，而且链接语句必须放在页面的 <head> 标记区。

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<title></title>
</head>

rel
- 指定链表到样式表，其值为 stylesheet
type
- 表示样式类型为 css
href
- 指定了 CSS 样式表所在的位置，此处表示在当前目录下的 CSS 文件夹下有个 style.css 文件

导入样式

导入到 HTML 文件中，也需要创建 CSS 文件。

<head>
    <style>
        @import '1.css'
    </style>
</head>

选择器

选择器也称选择符，HTML 语言中所有的标记都是通过不同的 CSS 选择器进行控制的。选择器不只是 HTML 文档中元素标记，它还可以是类（不同于面向对象中的类），ID(元素的唯一特殊名称)或是元素的某种状态

元素选择器

通配符选择器

选择符	名称	版本	描述
*	通配符选择器	CSS2	所有元素对象

代码如下：

1	*{ color: red;}

类型选择器

HTML 文档由多个不同标记组成，而 CSS 选择器就用于声明那些标记采用的样式

选择符	名称	版本	描述
E	类选择器	CSS1	一文档语言对象类型作为选择符

1 2	/* 这里 div 是 E ,E 就是指标签类型 */ div{ color: red;}

ID 选择器

与类选择器相似

#idvalue{property:value}

idvalue 是选择器的名称，自己定义。

类选择器可以给任意数量的标签定义，而 id 选择器在页面中的标记只能使用一次，一个网页文件中只能有一个元素，使用某一个 ID 的值

优先级： ID 选择器 > 类选择器

选择符	名称	版本	描述
E#myid	ID 选择器	CSS1	以唯一标识符 id 属性等于 myid 的 E 对象作为选择符

代码如下：

<html>
	<head>
		<style type="text/css">
			#test{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 id='test'>大会总结</h1>
	</body>
</html>

类选择器

在一个页面中，使用标签选择器，会控制页面中所有此类标记的显示样式。这个时候可以用类选择器来重新定义，一个标记具有class 属性。

选择符	名称	版本	描述
E.myclass	类选择器	CSS1	以 class 属性包含 myclass 的 E 对象作为选择符。

代码如下：

<html>
	<head>
		<style type="text/css">
			.one{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 class='one'>大会总结</h1>
	</body>
</html>

关系选择器

包含选择器

选择符	名称	版本	描述
E F	包含选择器	CSS1	选择所有被 E 元素包含的 F 元素

代码如下：

<html>
	<head>
		<style type="text/css">
			li a{ color:yellow;}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="">Hello,world,</a></li>
			<li><a href="">Hello,world,</a></li>
			<li><a href="">Hello,world,</a></li>
			<li><a href="">Hello,world,</a></li>
			<li><a href="">Hello,world,</a></li>
			<li><a href="">Hello,world,</a></li>
		</ul>
	</body>
</html>

子选择符

选择符	名称	版本	描述
E>F	子选择器	CSS2	选择所有作为 E 元素的子元素 F

代码如下：

/* 两个元素得相邻 */
<html>
	<head>
		<style type="text/css">
			div > a{ color: brown;}
		</style>
	</head>
	<body>
		<div><a href="">Hello world</a></div>
	</body>
</html>

相邻选择符

选择符	名称	版本	描述
E+F	相邻选择器	CSS2	选择紧贴在 E 元素之后 F 元素。

代码如下：

<html>
	<head>
		<style type="text/css">
			ol .order + li a{ color: black;}
		</style>
	</head>
	<body>
		<ol>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li class="order"><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
		</ol>
	</body>
</html>

兄弟选择符

选择符	名称	版本	描述
E~F	兄弟（同级）选择器	CSS3	选择 E 元素所有兄弟元素 F

代码如下：

<html>
	<head>
		<style type="text/css">
			ol .order ~ li a{ color: gray;}}
		</style>
	</head>
	<body>
		<ol>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li class="order"><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
			<li><a href="">Hello world</a></li>
		</ol>
	</body>
</html>

属性选择器

一共分为七种类型

选择符	版本	描述
E[att]	CSS2	选择具有 att 属性的 E 元素。
E[att=’val’]	CSS2	选择具有 att 属性且属性值等于 val 的 E 元素。
E[att~=’val’]	CSS2	选择具有 att 属性且属性值为一空格分割的字词列表，其中有一个等于 val 的 E 元素。
E[att^=’val’]	CSS3	选择具有 att 属性且属性值为以 val 开头的字符串的 E 元素
E[att$=’val’]	CSS3	选择具有 att 属性且属性值为以 val 结尾的字符串的 E 元素。
E[att*=’val’]	CSS3	选择具有 att 属性且属性值包含 val 的字符串的 E 元素
E[att\|=’val’]	CSS2	选择具有 att 属性且属性值为以 val 开头并用链接连接符“-”分隔的字符串的 E 元素，如果属性值为 val ,也将被选择

代码如下：

<html>
	<head>
		<style type="text/css">
		/* 属性选择符:含有某种属性 */
        a[target]{ color: lightblue;}
        a[data-role]{ color: lightgreen;}
        /* 含有具体值得属性选择器 */
        a[data-role='goToBack']{ color: orange;}
        a[data-role~='goTo']{ color:black;}
        a[data-role^='st']{ font-size:50px;}
        a[data-role$='d']{ font-size:60px;}
        a[data-role*='a']{ color:blue;}
        a[data-role|='begin']{ color:darkred;}}
		</style>
	</head>
	<body>
		<a href="" target="_blank">页面跳转</a>
		<a href="" data-role='goToNext'>页面跳转</a>
		<a href="" data-role='goToBack'>页面跳转</a>
		<a href="" data-role='goTo goToAll'>页面跳转</a>
		<a href="" data-role='start'>页面跳转</a>
		<a href="" data-role='end'>页面跳转</a>
		<a href="" data-role='begin-end'>页面跳转</a>
		<a href="" data-role='begin'>页面跳转</a>
	</body>
</html>

伪类选择器

伪类定义的 CSS 样式并不是在标记的，而是作用在标记的状态上。

伪类选择器正常的顺序为 link， visited，hover，active

选择符	版本	描述
E:link	CSS1	设置超链接 a 在未被访问前的样式。
E:visited	CSS1	设置超链接 a 在其连接地址已经被访问过时的样式。
E:hover	CSS1/2	设置元素在其鼠标悬停时的样式。
E:active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus	CSS1/2	设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。

伪对象选择器

选择符	版本	描述
E:first-letter/E::first-letter	CSS1	设置超链接 a 在未被访问前的样式。
E:first-line/E::first-line	CSS1	设置超链接 a 在其连接地址已经被访问过时的样式。
E:before/E::before	CSS1/2	设置元素在其鼠标悬停时的样式。
E:active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus	CSS1/2	设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。